import Alert from './Alert';

const AlertMixin = {
  install(Vue) {
    Vue.mixin({
      methods: {
        $alert(message, duration = 2000) {
          let Constructor = Vue.extend(Alert);
          let alert = new Constructor();
          alert.$slots.default = message;
          alert.$props.alert = this.$page.alert;
          alert.$mount();
          document.body.appendChild(alert.$el);

          const appendHeight = alert.$el.offsetHeight + 16;
          this.$page.alert.top += appendHeight;

          setTimeout(() => {
            this.$page.alert.top -= appendHeight;
            this.triggerRemoveAlert(appendHeight);
            setTimeout(() => {
              alert.$destroy();
              alert.$el.remove();
            }, 100);
          }, duration);
        },
        triggerRemoveAlert(height) {
          const event = new CustomEvent('alert_remove', {
            detail: { height },
          });
          window.dispatchEvent(event);
        },
      },
    });
  },
};

export default AlertMixin;
